<template>
  <image
    class="l-avatar"
    lazy-load
    :src="src"
    :style="{width:size,height:size,border}"
    :class="['l-avatar-'+type]"
  />
</template>

<script>
export default {
  name: 'LAvatar',
  props: {
    avatar: {
      type: [String, null],
      default: ''
    },
    size: {
      type: String,
      default: '120rpx'
    },
    type: { // 形状 circle(默认圆角), square(方形)，rightAngle(平角)
      type: String,
      default: 'circle'
    },
    border: {
      type: String,
      default: ''
    },
    default: {
      type: String,
      default: ''
    }
  },
  computed: {
    src() {
      return this.avatar || this.default || 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/default_avatar.png'
    }
  }
}
</script>

<style scoped lang="scss">
.l-avatar{
  border-radius:50%;
  box-sizing: border-box;
}
.l-avatar-square{
  border-radius:$radius-default;
}
.l-avatar-rightAngle{
  border-radius: 0;
}
</style>
